<template>
    <div class="jingcaipinglun">
        <h3>精彩评论</h3>
        <div class="wrapper">
            <ul>
                <li v-for="item in pinglun" :key="item.userId">
                    <span class="name">{{item.user.nickname}}：</span>
                    <span class="talk">{{item.content}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data(){
        return{
            pinglun:[],
        };
    },
    methods:{
        getRelated(){
            axios.get("/api/comment/hot?id=186016&type=0")
            .then(res => {
                console.log(res.data);
                console.log(res.data.hotComments);
                this.pinglun=res.data.hotComments;

            })
            .catch(err => {
                console.error(err); 
            })
        },
    },
    mounted(){
        this.getRelated()
    }
}
</script>

<style scoped>
h3{
    border-left: 3px solid #f00;
    text-align: left;
    letter-spacing: 3px;
}
ul > li {
  display: inline-block;/**设置为行内元素，强制不换行，同时具备block */
  text-align: left;
}
.name{
    font-size: 20px;
    font-weight: bold;
    color: black;
    text-align: left;
}
.talk{
    font-size: 15px;
    color: grey;
}
</style>